<template>
  <div class="cq-banner flex flex-center">
    <div class="cq-ban-slider flex flex-between">
      <span class="slider-active"></span><span></span>
    </div>
    <div class="cq-ban-tips w1160 flex flex-center">
      <img src="@/assets/img/logo-tips.png" width="76" height="70" alt="logo" />
      <p>
        橙券，是权益营销方案提供商，为实现品牌-市场-用户的紧密互联提供强有力的智慧支持
      </p>
      <btn-more >了解更多</btn-more>
    </div>
  </div>
</template>

<script>
import BtnMore from './btn-more'
export default {
  name: 'cq-banner',
  components: {
    BtnMore
  },
  data () {
    return {
      btnBrand: "banner-bottom-btn",
    }
  }
}
</script>

<style lang="scss" scoped>
/*==== banner start ====*/

.cq-banner {
  position: relative;
  height: 680px;
  background: #051630 url(@/assets/img/banner.jpg) no-repeat center/cover;
}

.cq-ban-slider {
  position: absolute;
  bottom: 84px;
  width: 115px;
}

.cq-ban-slider span {
  width: 48px;
  height: 3px;
  background-color: #838a94;
  cursor: pointer;
}

.cq-ban-slider span.slider-active {
  background-color: #fff;
}

.cq-ban-tips {
  position: absolute;
  bottom: -80px;
  padding: 24px 36px;
  background-color: #fff;
  box-shadow: 0 8px 8px #f1f1f1;
}

.cq-ban-tips p {
  padding: 0 50px 0 42px;
  font-size: 20px;
  line-height: 70px;
}


</style>
